<template>
	<view class="scenario-box" v-if="activity.gameid">
		<view class="jb-icon" v-if="activity.gametype == '80010101'">
			<image class="jbs" src="/static/img/img_lrs.png" mode="widthFix" ></image>
		</view>
		<view class="jb-icon" v-if="activity.gametype == '80010102'">
			<image class="jbs" src="/static/img/img_jbsha.png" mode="widthFix" ></image>
		</view>
		<view class="scen  text-grey" 
			@click.stop="jumpActivity"
		>
			<view class="scen-img">
				<image class="img" :src="activity.gameimg" mode="aspectFill"></image>
			</view>
			<view class="scen-info">
				<view class="main-hd">
					<view class="num">
						<text class="orange">{{activity.addnum}}</text>/{{activity.maxnum}}
					</view>
					<view class="title  text-cut">{{activity.gamename}}</view>
					<view class="mittelkurs">
						<text class="text-price orange">{{activity.gameprice}}</text>/人
					</view>
				</view>
				<!-- <view v-if="activity.gametype == '80010105'">
					<view class="sub-hd" >
						<view class="room" v-if="activity.customnum">{{activity.customnum}}</view>
						<view class="date">{{gdate.formatTime(activity.startdate)}} {{activity.timequantum}}</view>
					</view>
					<view class="tag-group text-cut" v-if="activity.timename">
						<view class='cu-tag line-cyan radius sm'>{{activity.timename}}</view>
					</view>
				</view> -->
				<view>
					<view class="sub-hd">
						<view class="room" v-if="activity.customnum">{{activity.customnum}}</view>
						<view class="date">{{gdate.formatTime(activity.startdate,activity.starttime)}}</view>
					</view>
					<view class="tag-group text-cut" v-if="tags.length">
						<block v-for="(tag, index) of tags" :key="index">
							<view class='cu-tag line-gray radius sm'>{{tag}}</view>
						</block>
					</view>
				</view>
				
				
				<view class="register" v-if="activity.ueselist && activity.ueselist.length">
					<view class="cu-avatar-group">
						<view class="cu-avatar round sm more" ></view>
						<view class="cu-avatar round sm" 
							v-for="(item,index) in avatar" 
							:key="index" 
							:style="[{ backgroundImage:'url(' + item.headurl + ')' }]"
						></view>
					</view>
					<view class="total-group">
						<text class="text-bold num">{{activity.addnum}}</text>人已报名
						<text class="cuIcon-right"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script module="gdate" lang="wxs">
	function formatTime (startdate, starttime) {
		var Yy = startdate.substring(0,4) + '年'
		var Mm = startdate.substring(4,6) + '月'
		var Dd = startdate.substring(6,9) + '日'
		if(starttime) {
			var time = starttime.substring(0,2) + ':' + starttime.substring(2)
			return Yy + Mm + Dd+  " " + time
		}
		return Yy + Mm + Dd
	}
    module.exports = {
		formatTime: formatTime
    }
</script>
<script>
	export default {
		name: 'ViewScenario',
		computed:{
			tags() {
				let scenstyle = this.activity.scenstyle
				if (!scenstyle) return []
				return scenstyle.split(' ')
			},
			avatar() {
				let ueselist = this.activity.ueselist
				if (!ueselist) return []
				if (ueselist.length > 3) {
					ueselist = ueselist.slice(0, 3)
				} 
				return ueselist
			}
		},
		props: {
			activity: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		methods:{
			jumpActivity() {
				this.$jumpPages('activity', {
					gameid:	this.activity.gameid,
					gametype: this.activity.gametype,
					gameplanid:	this.activity.gameplanid,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scenario-box{
		background-color: #FFFFFF;
		border-radius: 16rpx; 
		margin: 0 30rpx 20rpx;
		position: relative;
		.jb-icon{
			position: absolute;
			.jbs{
				width: 80rpx;
				z-index: 10;
				top: -6rpx;
			}
		}
		.scen{
			.scen-img{
				position: absolute;
				width: 201rpx;
				height: 268rpx;
				left: 0;
				top: 0;
				.img{
					width: 201rpx;
					height: 268rpx;
					border-radius: 16rpx 0 0 16rpx; 
				}
			}
			.scen-info{
				min-height: 268rpx;;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				position: relative;
				margin-left: 201rpx;
				padding-left: 15px;
				font-size: 14px;
				line-height: 1;
			}
			.main-hd{
				display: flex;
				align-items: center;
				padding: 24rpx 24rpx 12rpx 0;
				font-size: 30rpx;
				color: #333333;
				.num{
					letter-spacing: 1px;
				}
				.orange{
					color: #FE6B42;
				}
			}
			.sub-hd{
				padding: 4rpx 24rpx 12rpx 0;
				font-size: 26rpx;
				color: #666666;
				line-height: 1.4;
				.date {
					display: inline-block;
				}
				.room{
					margin-right: 28rpx;
					display: inline-block;
				}
			}
			.title{
				flex: 1;
				margin-left: 18rpx;
				font-size: 30rpx;
				font-weight: 400;
			}
			.mittelkurs{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				margin-left: 10rpx;
				.orange{
					font-size: 30rpx;
					margin-right: 1px;
					font-weight: 700;
				}
			}
			.register{
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				left: 24rpx;
				bottom: 12rpx;
				right: 24rpx;
				.cu-avatar-group {
				    padding: 0 10rpx 0 12rpx;
				}
				.cu-avatar{
					margin-left: -12rpx;
				}
				.more{
					background-color: #f1f2f3;
					&::after{
						content: '...';
						color: #999999;
						font-size: 40rpx;
						position: absolute;
						left: 2rpx;
						top: -10rpx;
					}
				}
			}
			.tag-group{
				height: 50rpx;
				.cu-tag{
					padding: 0 12rpx;
					height: 40rpx;
				}
			}
			.total-group{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #333333;
				
				.num{
					font-size: 28rpx;
				}
			}
		}
		
	}
</style>
